<!-- 全球服配置 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showSet="false" @reset="onHideDetails" @search="getSearchList">
    <template #form></template>
    <template #button>
      <el-button type="primary" @click="data.isShowDetails = true">新增全球服</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
          <template v-if="item.prop == 'server_type'" #default="scope">
            <el-tag >{{ selectToLabel(GameServer, scope.row.server_type) }}</el-tag>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="90" align="center">
        <template #default="scope">
          <el-button type="warning" v-permiss="'/system/destroyManager'" size="small" @click="checkDetails(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 全球服配置 -->
  <el-dialog v-model="data.isShowDetails" title="全球服配置" :close-on-click-modal="false" :close-on-press-escape="false"
    width="50%" top="20vh" @close="onHideDetails">
    <el-form ref="ruleFormRef" :model="data.formParam" :inline="true" :rules="data.rules" :scroll-to-error="true">
      <form-item title="全球服名称" :pass="true" value="server_name">
        <el-input class="width320" v-model="data.formParam.server_name" placeholder="请输入全球服名称" clearable onKeyUp="value=value.replace(/[\W]/g,'')" />
      </form-item>
      <form-item title="游戏端服务器" value="server_type">
        <el-select class="selectWidth200" v-model="data.formParam.server_type" placeholder="请选择">
          <el-option v-for="item in GameServer" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </form-item>
      <form-item title="服务器ID" :pass="true" value="server_id">
        <el-input class="width320" v-model="data.formParam.server_id" placeholder="请输入服务器ID" clearable onKeyUp="value=value.replace(/[\W]/g,'')" />
      </form-item>
      <form-item title="地址" :pass="true" value="url">
        <el-input class="imWidth100" v-model="data.formParam.url" placeholder="请输入地址" clearable onKeyUp="value=value.replace(/[\W]/g,'')" />
      </form-item>
      <!-- <form-item title="回调地址" value="call_back_url">
        <el-input class="imWidth100" v-model="data.formParam.call_back_url" placeholder="请输入回调地址" clearable onKeyUp="value=value.replace(/[\W]/g,'')" />
      </form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails(false)">取 消</el-button>
        <el-button icon="CircleCheck" type="primary" size="small" @click="changeName(ruleFormRef)">确 认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { getGlobalServer, addGlobalService, editGlobalService } from '@/api/config'
import { throttle, selectToLabel } from '@/utils/index'
import { GameServer } from '@/config/eunm'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
  },
  list: [],
  total: 0,
  fields: [
    { label: 'ID', prop: 'server_id', width: '150', visible: true },
    { label: '服务器名称', prop: 'server_name', width: '200', visible: true },
    { label: '游戏端服务器', prop: 'server_type', width: '150', visible: true },
    { label: '服务器ID', prop: 'server_id', width: '200', visible: true },
    { label: '地址', prop: 'url', width: '', visible: true },
  ],
  formParam:{
    server_name: '',
    server_type: 1,
    url: '',
    call_back_url: '',
    server_id: '',
  },
  rules: {
    server_name: [{ required: true, message: '请输入', trigger: 'blur' }],
    server_id: [{ required: true, message: '请输入', trigger: 'blur' }],
    url: [{ required: true, message: '请输入', trigger: 'blur' }],
  },
  isShowDetails: false,
  listTable: [] as any[],
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let query = JSON.parse(JSON.stringify(data.query))
  let res = await getGlobalServer(query)
  data.list = res.data
}

// 详情
const checkDetails = (row: any) => {
  data.isShowDetails = true
  data.formParam = row
}

// 新增/修改
const ruleFormRef = ref<FormInstance>()
const changeName = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let query = JSON.parse(JSON.stringify(data.formParam))
      query.id? await editGlobalService(query) : await addGlobalService(query)
      ElMessage.success('操作成功')
      nextTick(()=>{
        indexStore.getServerName() //全球服
      })
      onHideDetails(true)
    }
  })
}, 3000)

// 重置
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  data.formParam = {
    server_name: '',
    server_type: 1,
    url: '',
    call_back_url: '',
    server_id: '',
  }
  if (show) {
    getSearchList()
  }
}
</script>

<style lang="scss" scoped></style>
